<!-- eslint-disable prettier/prettier -->
<template>
    <div class="login">
        <v-card class="form">
            <div class="label">
                <div class="title">
                    校园卡
                </div>
            </div>
            <div class="mt-4">
                <div class="mb-2" style="font-weight: 700">姓名：</div>
                <v-text-field model-value="" type="password" variant="outlined" density="compact" clearable
                    placeholder="请输入姓名" hide-details></v-text-field>
            </div>
            <div class="my-4">
                <div class="mb-2 mt-4" style="font-weight: 700">身份证：</div>
                <v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入身份证号码"
                    clearable hide-details></v-text-field>
            </div>
            <div class="my-4">
                <div class="mb-2 mt-4" style="font-weight: 700">收货地址：</div>
                <v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入收货地址"
                    clearable hide-details></v-text-field>
            </div>
            <div class="my-4">
                <div class="mb-2 mt-4" style="font-weight: 700">联系电话：</div>
                <v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入联系电话"
                    clearable hide-details></v-text-field>
            </div>
            <div class="my-4">
                <div class="mb-2 mt-4" style="font-weight: 700">手机型号：</div>
                <v-text-field model-value="" type="password" variant="outlined" density="compact" placeholder="请输入手机型号"
                    clearable hide-details></v-text-field>
            </div>
            <div class="my-6">
                <v-btn color="primary" variant="flat" block size="large" type="submit">
                    提交
                </v-btn>
            </div>
        </v-card>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
reactive({
    email: '',
    password: ''
})
</script>
<style lang="scss" scoped>
.login {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    .form {
        border-radius: 8px;
        box-shadow: none;
        width: 520px;
        margin: 0 auto;
        padding: 40px;
        padding-bottom: 16px;

        .label {
            text-align: center;

            .title {
                font-size: 32px;
                font-weight: bold;
            }
        }

        .d-flex {
            .text-center {
                flex: 0 0 60px;
            }
        }
    }
}

@media only screen and (max-width: 778px) {}
</style>
